import React, { Component } from "react";
// todo withRouter是一个高阶组件，作用就是让那些没有路由信息的组件，拥有路由信息
import { Link, Route, Switch, withRouter } from "react-router-dom";

class Home extends Component {
  render() {
    return <div>这是首页页面</div>;
  }
}

// const Home = () => {
//   return <div>这是首页页面</div>;
// };

class About extends Component {
  render() {
    // console.log(this.props);
    return <div>这是关于页面</div>;
  }
}

// const About2 = () => <About />;

// const About = () => {
//   return <div>这是关于页面</div>;
// };

// class Mine extends Component {
//   render() {
//     return <div>这是我的页面</div>;
//   }
// }
const Mine = () => {
  return <div>这是我的页面</div>;
};

@withRouter
class Classify extends Component {
  render() {
    console.log(this.props);
    return <div>这是分类页面</div>;
  }
}
// const Classify = withRouter((props) => {
//   console.log(props);
//   return <div>这是分类页面</div>;
// });

class App extends Component {
  render() {
    return (
      <>
        <h2>react-router-路由的渲染方式</h2>
        <ul>
          <li>
            <Link to="/home">home</Link>
          </li>
          <li>
            <Link to="/about">about</Link>
          </li>
          <li>
            <Link to="/mine">mine</Link>
          </li>
          <li>
            <Link to="/classify">classify</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          {/* 渲染页面比较常用的方式是使用component属性 */}
          {/* component既能渲染函数组件也能渲染类组件 */}
          <Route path="/home" component={Home}></Route>
          {/* render属性也可以渲染页面 */}
          {/* render属性只能渲染函数组件，不能渲染类组件 */}
          {/* render想渲染类组件，需要使用箭头函数, 但是路由信息是需要传递一下 */}
          {/* render里面写函数，就可以写逻辑判断 */}
          <Route
            path="/about"
            render={(props) => {
              return <About {...props} />;
            }}
          ></Route>
          {/* children属性也可以做渲染 */}
          {/* children属性在有Switch的情况下和render是一样的，没有Swtich的情况下不管url是否匹配都会渲染 */}
          <Route path="/mine" children={Mine}></Route>
          {/* 也可以使用插槽的方式直接写在Route的里面 */}
          {/* 既能渲染函数组件也能渲染类组件 */}
          {/* 但是插槽的方式是没有路由信息的 */}
          <Route path="/classify">
            <Classify />
          </Route>
        </Switch>
      </>
    );
  }
}

export default App;
